<!--
 * @Author: wang
 * @Date: 2022-07-22 10:50:20
 * @LastEditors: wang
 * @LastEditTime: 2022-07-28 18:28:58
 * @Description: 
-->
<template><!-- 面包屑导航 -->
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
  </el-breadcrumb>

  <!-- 列表区域 -->
  <el-card>
    <!-- 搜索框区域 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input v-model="inputVal" placeholder="请输入内容">
          <template #append>
            <el-button size="large" :icon="Search" />
          </template>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button size="large" class="users-search-btn" type="primary" @click="addNewUser">添加用户</el-button>
      </el-col>
    </el-row>

    <!-- 表格区域 -->
    <el-table stripe size="large" :data="data.tableData" border style="width: 100%">
      <el-table-column label="#" type="index" width="50" />
      <el-table-column prop="username" label="姓名" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="mobile" label="电话" />
      <el-table-column prop="role_name" label="角色" />
      <el-table-column prop="address" label="状态">
        <template #default="scope">
          <el-switch v-model="scope.row.mg_state" @change="changeStatus(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" :icon="Edit" @click="editUser(scope.row.id)" />
          <el-button type="danger" :icon="Delete" @click="delUser(scope.row.id)"/>
          <el-button type="warning" :icon="Setting" @click="editUserRole(scope.row)"/>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination v-model:currentPage="data.pagenum" v-model:page-size="data.pagesize" :page-sizes="[5, 10, 15, 20]"
      small layout="total, sizes, prev, pager, next, jumper" :total="data.total" @size-change="getUserList"
      @current-change="getUserList" />
  </el-card>

  <add-user :visible="addUserVisible" @close="closeAddUser" />
  <EditUser :visible="editUserVisible" :id="uId" @close="closeEditUser" />
  <SetRole :visible="setRoleVisible" :row="rowData" @close="closeSetRole"/>
</template>

<script setup lang='ts'>
import { Search, Edit, Delete, Setting } from "@element-plus/icons-vue"
import { onMounted, reactive, ref, getCurrentInstance } from "vue"
import { getUserListApi, changeUserStatus, delUserApi } from "@/api/interface"
import AddUser from "./components/AddUser.vue";
import EditUser from "./components/EditUser.vue";
import SetRole from "./components/SetRole.vue";

const { proxy } = getCurrentInstance() as any
const inputVal = ref<string | null>("")

const data = reactive<UserData>({
  tableData: [],
  pagenum: 1,
  pagesize: 10,
  total: 0
})

onMounted(() => {
  getUserList()
})

// 获取用户列表
const getUserList = async () => {
  const res = await getUserListApi({ query: inputVal.value, pagenum: data.pagenum, pagesize: data.pagesize })
  if (res.meta.status === 200) {
    data.tableData = res.data.users
  }
}

// 添加用户
const addUserVisible = ref(false)
const addNewUser = () => {
  addUserVisible.value = true
}
const closeAddUser = () => {
  getUserList()
  addUserVisible.value = false
}

// 编辑用户
const editUserVisible = ref(false)
const uId = ref()
const editUser = (id: any) => {
  uId.value = id
  editUserVisible.value = true
}
const closeEditUser = () => {
  getUserList()
  editUserVisible.value = false
}

// 删除用户
const delUser = (id:number) => {
  proxy.$messageBox.confirm(
    '将会删除此用户?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      delUserApi(id).then((res:any) => {
        getUserList()
        proxy.$message.success('删除成功')
      })
    })
}

// 更改用户状态
const changeStatus = async (row: any) => {
  const res = await changeUserStatus(row.id, row.mg_state)
  if (res.meta.status === 200) {
    proxy.$message.success(res.meta.msg)
  }
}

// 编辑用户角色
const setRoleVisible = ref(false)
const rowData = ref()
const editUserRole = (row: any) => {
  rowData.value = row
  setRoleVisible.value = true
}
const closeSetRole = () => {
  getUserList()
  setRoleVisible.value = false
}
</script>

<style lang='scss' scoped>
.el-card {
  margin-top: 20px;
}

.el-table {
  margin-top: 20px;
}

.el-pagination {
  margin-top: 20px;
}
</style>